<template>
    <div>
        <!-- 顶部导航 -->
        <van-nav-bar title="个人信息" left-text="返回" @click-left="onClickLeft" color="#999"  class="leader"  left-arrow>
            <template #right >
            <van-icon name="ellipsis" size='26px' color='#999' class="pullTab" @click.stop="ShowHidden = !ShowHidden" />
            <Pulltab 
                    v-if="ShowHidden" 
                    @click.stop=""
            />
            </template>
        </van-nav-bar>
        <div class="cont">
            <div class="box">
                <div class="dingdan">
                    <van-icon name="passed" size="56px" color="#00d2c3"/>
                    <div class="info">
                        <h2>订单提交成功，请您尽快付款!</h2>
                        <h2>24小时未支付的订单，将自动取消!</h2>
                        <p>订单号: <span>202112191324044402</span></p>
                    </div>
                </div>
                <div class="price">
                    <h2>支付金额:</h2>
                    <span>￥{{Allprice}}元</span>
                </div>
                <div class="zhifu">
                    <div class="yue">
                        <span>账户余额 ￥0.00元</span>
                        <van-radio-group v-model="radio1">
                            <van-radio name="1" checked-color="#00D2C3" icon-size="23px" label-disabled></van-radio>
                        </van-radio-group>
                    </div>
                    <div class="qita">
                        <p>其他方式</p>
                    </div>
                    <div class="fangshi">
                        <van-radio-group v-model="radio">
                            <div class="weixin">
                                <div class="img">
                                    <img src="../assets/images/home/zhifubao.webp" alt="">
                                    <span>手机网站支付宝</span>
                                </div>
                                <van-radio name="1" checked-color="#00D2C3" icon-size="23px"></van-radio>
                            </div>
                            <div class="weixin">
                                <div class="img">
                                    <img src="../assets/images/home/weixin.png" alt="">
                                    <span>微信支付</span>
                                </div>
                                <van-radio name="2" checked-color="#00D2C3" icon-size="23px"></van-radio>
                            </div>
                        </van-radio-group>
                    </div>
                </div>
                <div class="footer">
                    <div class="bottom">
                        <p>*订单里含有不能使用慧医卡支付的商品，如需要使用慧医卡支付，请分开下单，请谅解带来的不便!</p>
                        <h2 @click="handle">确认支付￥{{Allprice}}.00</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import Pulltab from '../components/Pulltab.vue'
    import {Toast} from 'vant'
    export default {
        components: {
            Pulltab,
        },
        data() {
            return {
                ShowHidden: false,
                radio:0,
                radio1:1
            }
        },
        created () {
            console.log(this.Allprice);
            console.log(111);
        },
        methods: {
            onClickLeft() {
                this.$router.go(-1)
            },
            handle(){
                // this.$router.push('/myorder')
                Toast.success("支付成功")
            }
        },
        computed: {
            Allprice() {
                return this.$store.state.detail.Allprice
            },
            list(){
                return this.$store.state.detail.list
            }
        },
    }
</script>

<style  scoped>
::v-deep .van-nav-bar__left i{
    color:#00D6D4;
    font-size: 20px;
}
::v-deep .van-nav-bar__left span,::v-deep .van-nav-bar__title{
    color: #00D6D4;
    font-size: 16px;
}
</style>
<style src="../assets/css/order.css" scoped></style>